{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="/static/index/css/pay.css">
{/block}
{block name="content"}
<div class="header">
  <a href="javascript:void(0);" class="back-btn">
    <i class="fa fa-angle-left" style="font-size: 24px;"></i>
  </a>
  <h1 class="header-title">充值列表</h1>
</div>
<div class='weui-content'>
  <!-- 状态Tab切换 -->
  <div class="status-tabs">
    <div class="status-tab active" onclick="switchTab(0,this)">全部</div>
    <div class="status-tab" onclick="switchTab(1,this)">审核中</div>
    <div class="status-tab" onclick="switchTab(2,this)">已通过</div>
    <div class="status-tab" onclick="switchTab(-1,this)">已拒绝</div>
  </div>

  <!-- 充值记录列表 -->
  <div class="weui-panel">
    <div class="record-list" style="height:90vh; overflow:auto;">

    </div>

    <div class="load-more">加载中</div>
  </div>
</div>
{/block}
{block name="script"}
<script>
  // 变量初始化（统一声明，添加注释说明）
  let page = 1;
  let loading = false;  // 加载状态锁：防止并发请求
  let pay_status = 0;   // 当前选中的支付状态
  let switchTimer = null; // Tab切换防抖计时器
  let scrollTimer = null; // 滚动加载防抖计时器
  let requestId = 0;    // 请求唯一标识：用于忽略过期请求

  // 滚动加载更多（防抖+节流优化）
  $(".record-list").infinite().on("infinite", function() {
    if (loading) return; // 加载中直接拦截

    // 清除上一次滚动计时，500ms内只执行一次
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(() => {
      if (loading) return; // 二次检查，防止并发

      loading = true;
      page++;
      load(page); // 加载下一页
    }, 500);
  });

  // Tab切换（防抖+状态重置）
  function switchTab(status, obj) {
    // 清除上一次切换计时，300ms内快速点击合并为一次
    clearTimeout(switchTimer);
    switchTimer = setTimeout(() => {
      // 重置列表和状态
      $(".record-list").empty();
      loading = false;
      page = 1;
      pay_status = status;
      requestId++; // 更新请求标识，使旧请求失效
      load(page, obj);
    }, 300);
  }

  // 初始加载第一个Tab（优化触发逻辑）
  $(function() {
    const $firstTab = $(".status-tabs").find(".status-tab").eq(0);
    // 主动绑定点击事件，确保参数正确传递
    $firstTab.on("click", function() {
      switchTab(0, this); // 假设第一个Tab对应status=0，可根据实际调整
    });
    $firstTab.trigger("click"); // 触发初始加载
  });

  // 加载数据（增强容错和状态管理）
  function load(page, obj) {
    $('.load-more').show();
    const currentId = requestId; // 记录当前请求标识

    // 调用post请求（假设已支持错误回调）
    post("/pay-list.html", {
      page: page,
      limit: 7,
      field: "id",
      order: "desc",
      status: pay_status
    }, function(res) {
      // 忽略过期请求（已被新请求替代）
      if (currentId !== requestId) return;

      // 重置加载状态
      loading = false;
      $('.load-more').hide();

      if (res) { // 简化判断：非空即有效
        $(".record-list").append(res);
      } else {
        // 无更多数据处理
        loading = true;
        page--; // 回退页码，避免后续无效增长
        // 移除旧提示，添加新提示（避免重复）
        $(".record-list").find(".weui-cells__title").remove();
        $(".record-list").append(`<div class="weui-cells__title"><p class='center-div'>已无更多数据</p></div>`);
      }

      // 更新Tab激活状态（严格检查obj有效性）
      if (obj && $(obj).length) {
        $(obj).parent().find(".status-tab").removeClass("active");
        $(obj).addClass("active");
      }
    }, function() { // 错误回调（需配合改造后的post方法）
      if (currentId !== requestId) return;

      loading = false;
      $('.load-more').hide();
      page--; // 失败时回退页码
    });
  }
</script>
{/block}
